<template>
  <div id="icons-container">
    <ul class="icon-list">
      <li v-for="item in icons" :key="item"><i :class="item" @click="selectIcon(item)"></i></li>
    </ul>
  </div>
</template>

<script>
import icons from '@/components/common/iconClassNames'

export default {
  name: 'Icons',
  data(){
    return {
      icons: icons
    }
  },
  methods: {
    selectIcon(className){
      // 点击选择图标事件
      this.$emit('select', className)
    }
  }
}
</script>

<style lang="less">
  #icons-container{
    .icon-list{
      overflow: hidden;
      list-style: none;
      padding: 0!important;
      border-left: 1px solid #eaeefb;
      border-top: 1px solid #eaeefb;
      border-radius: 4px;
      li{
        float: left;
        width: 7.66%;
        text-align: center;
        height: 65px;
        line-height: 65px;
        color: #666;
        font-size: 13px;
        border-right: 1px solid #eee;
        border-bottom: 1px solid #eee;
        margin-right: -1px;
        margin-bottom: -1px;
        i{
          font-size: 32px;
          color: #606266;
          transition: color .15s linear;
          cursor: pointer;
          line-height: 65px;
        }
      }
    }
  }
</style>
